<template>
  <a-card size="small" :title="group.groupTxt">
    <a-dropdown slot="extra">
      <a-menu slot="overlay" >
        <template v-for="(chart,index) in group.charts">
          <a-menu-item @click="handleMenuClick(chart.head.code)" :key="index">{{chart.head.name}}</a-menu-item>
        </template>
      </a-menu>
      <a-button type="primary" size="small" class="ant-btn-background-ghost">详情<a-icon type="down"/></a-button>
    </a-dropdown>
    <bar-and-line :dataSource="getDataSource" ></bar-and-line>
  </a-card>
</template>
<script>
import BarAndLine from '@/components/chart/BarAndLine'
export default {
  name: 'CombinationGraphreportAutoChart',
  mixins: [],
  components: {
    BarAndLine
  },
  props: {
    group: {
      type: Object,
      default: {}
    }
  },
  computed: {
    getDataSource() {
      var dataSouce = []
      var that = this
      this.group.charts.forEach(function(chart, i) {
        if (chart.head.graphType === 'line') {
          that.setChartData(chart, 'line', dataSouce)
        } else if (chart.head.graphType === 'bar') {
          that.setChartData(chart, 'bar', dataSouce)
        }
      })
      return dataSouce
    }
  },
  data() {
    return {
      barType: ''
    }
  },
  methods: {
    setChartData(chart, type, dataSouce) {
      var datas
      if (chart.head.dataType === 'json') {
        datas = JSON.parse(chart.head.cgrSql)
      } else if (chart.head.dataType === 'sql' && chart.head.aggregate === true) {
        datas = chart.data.aggregate
      } else if (chart.head.dataType === 'sql' && chart.head.aggregate === false) {
        datas = chart.data.data
      }
      if (dataSouce.length <= 0) {
        datas.forEach(function(item, i) {
          var data = {
            type: item[chart.head.xaxisField]
          }
          data[type] = item[chart.head.yaxisField]
          dataSouce.push(data)
        })
      } else {
        datas.forEach(function(item, i) {
          dataSouce[i][type] = item[chart.head.yaxisField]
        })
      }
    },
    handleLineClick(msg) {
      if (this.head.extendJs) {
        this.chartClick('line', msg)
      }
    },
    chartClick(type, msg) {
      var onClick = {}
      eval(this.head.extendJs)
      if (onClick && onClick[type]) {
        onClick[type].call(this, msg)
      }
    },
    handleMenuClick(code) {
      this.$router.push({ path: '/online/cggraphreport/chart/' + code })
    }
  }
}
</script>
<style scoped>

</style>
